不知道讀者們有沒有用過筆記軟體Notion
其中有個功能叫做 Embed => 可以嵌入 pdf檔案
今天來做一個在網頁上嵌入pdf的MVP
我們會用到一個平常比較少看到的標籤叫做 <object>
它很神奇可以透過data
屬性來引入
建議:
<img>
<iframe>
<video>
<audio>
2.文件有寫usemap屬性但是實際測試沒效果
拿昨天的影像地圖來改寫成obeject但沒作用
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object#usemap
https://www.w3schools.com/TAgs/tag_object.asp
3.若想要透過html按鈕控制pdf內容
ex: 跳頁
需要用其他套件才能實現
推薦套件:pdfjs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>object tag demo</title>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
}
.wrapper {
height: 99dvh;
border: 2px solid white;
}
</style>
</head>
<body>
<div class="wrapper">
<object
type="application/pdf"
data="https://interactive-examples.mdn.mozilla.net/media/examples/In-CC0.pdf"
width="100%"
height="100%"
></object>
</div>
</body>
</html>
晚上剛好看到一個前端debug小技巧
影片,覺得不錯分享個~
【前端错误调试的小技巧】 https://www.bilibili.com/video/BV14PHCe1EnD/?share_source=copy_web&vd_source=77d7a376bbe040202ede333f5e4fa1f0